<template>
  <div>
    <a-card class="info-card">
      <a-descriptions title="病人信息">
        <a-descriptions-item label="姓名">
          {{ patient.name }}
        </a-descriptions-item>
        <a-descriptions-item label="手机号码">
          {{ patient.phone }}
        </a-descriptions-item>
        <a-descriptions-item label="性别">
          {{ patient.gender === false? '男':'女' }}
        </a-descriptions-item>
        <a-descriptions-item label="科室">
          {{ patient.department | departmentFilter }}
        </a-descriptions-item>
        <a-descriptions-item label="病房">
          {{ patient.ward + '-' + patient.bed }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="advice-card" title="医嘱信息">
      <a-row offset="4">
        <a-timeline>
          <a-timeline-item :color="a.state | colorFilter" v-for="a in advices" :key="a.id">
            <a-card hoverable style="width: 300px">
              <template slot="actions" class="ant-card-actions" v-if="$auth('patient.doAdvice')">
                <a-tooltip placement="bottom" v-if="a.state === 1">
                  <template slot="title">
                    <span>完成核对</span>
                  </template>
                  <a-icon type="reconciliation" @click="handleAdvice(a.id)"/>
                </a-tooltip>
                <a-tooltip placement="bottom" v-if="a.state === 2">
                  <template slot="title">
                    <span>已取药</span>
                  </template>
                  <a-icon type="medicine-box" @click="handleAdvice(a.id)"/>
                </a-tooltip>
                <a-tooltip placement="bottom" v-if="a.state === 3">
                  <template slot="title">
                    <span>已完成医嘱</span>
                  </template>
                  <a-icon type="check" @click="handleAdvice(a.id)"/>
                </a-tooltip>
              </template>
              <p>{{ a.text }}</p>
              <a-tag :color="a.state | colorFilter">{{ a.state | stateFilter }}</a-tag>
              <p><small>{{ a.doctorName }} </small><small>{{ a.date }}</small></p>
            </a-card>
          </a-timeline-item>
        </a-timeline>
      </a-row>
    </a-card>
    <a-card title="增加医嘱" v-action:addAdvice>
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item label="医嘱">
          <a-textarea
            placeholder="请输入医嘱"
            v-decorator="['text', { rules: [{ required: true, message: '请输入医嘱' }] }]"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
        <a-form-item label="医嘱类型">
          <a-select
            placeholder="请选择医嘱类型"
            v-decorator="[ 'state', {rules: [{ required: true, message: '请选择医嘱类型'}]} ]">
            <a-select-option :key="1">药品医嘱</a-select-option>
            <a-select-option :key="3">非药品医嘱</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit">
            添加
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { getPatient, addAdvice, doAdvice } from '../../api/patient'
import { departmentFilter } from '@/dictionary'
export default {
  name: 'Advice',
  data () {
    return {
      data: {
        patientId: null,
        text: '',
        date: null,
        doctorName: '',
        state: 0
      },
      advices: null,
      patient: null,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          this.data.patientId = this.$route.query.id
          this.data.text = this.form.getFieldValue('text')
          this.data.date = new Date()
          this.data.doctorName = this.$store.getters.userInfo.name
          this.data.state = this.form.getFieldValue('state')
          console.log('advice', this.data)
          addAdvice(this.data).then(res => {
            // this.$router.push('/advice/index')
            this.$router.go(0)
            this.$notification.success({
              message: '成功',
              description: `添加成功`
            })
          }).catch(err => {
            this.loading = false
            this.$notification.error({
              message: '失败',
              description: `添加失败`
            })
            console.log(err)
          })
        }
      })
    },
    handleAdvice (id) {
      doAdvice(id).then(res => {
        this.$router.go(0)
        this.$notification.success({
          message: '成功',
          description: `执行成功`
        }).catch(err => {
          this.loading = false
          this.$notification.error({
            message: '失败',
            description: `执行失败`
          })
          console.log(err)
        })
      })
    },
    goIndex () {
      this.$router.push('/patient/index')
    },
    initValue () {
      getPatient(this.id).then(res => {
        this.patient = res.result
        this.advices = res.result.advices
      }).catch(err => {
        this.$router.go(-1)
        this.$notification.error({
          message: '错误',
          description: `无法进入该页面`
        })
        console.log('err', err)
      })
    }
  },
  filters: {
    departmentFilter,
    colorFilter (value) {
      switch (value) {
        case 1 : return 'red'
        case 2 : return 'blue'
        case 3 : return 'green'
        default: return 'gray'
      }
    },
    stateFilter (value) {
      switch (value) {
        case 1 : return '等待核对'
        case 2 : return '等待取药'
        case 3 : return '等待执行'
        default: return '已完成'
      }
    }
  },
  created () {
    this.id = this.$route.query.id // 获取路径参数 id
    if (this.id === undefined || this.id === null) {
      this.$router.push('/patient/index')
    }
    console.log('id:', this.id)
    this.initValue()
  }
}
</script>

<style scoped>
.info-card{
  margin-bottom: 20px;
}
.advice-card{
  margin-bottom: 20px;
}
</style>
